<template>
  <span class="type-text" :style="{backgroundColor: typeColors[type]}">{{typeTexts[type] || '未知'}}</span>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      typeColors: {
        simple: '#18a9fb',
        brief: '#18a9fb',
        common: '#ff6849',
        luxury: '#9b66da'
      },
      typeTexts: {
        simple: '简约',
        brief: '简约',
        common: '轻奢',
        luxury: '豪华'
      }
    }
  }
}
</script>

<style lang='less' scoped>
.type-text {
  padding: 0.1em 0.4em;
  border-radius: 2px;
  color: white;
  white-space: nowrap;
  margin-right: 5px;
  background-color: #eee;
}
</style>
